<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浏览器事件</title>

    <style>
        body {
            width: 2000px;
            height: 2000px;
        }
    </style>

    <script>
        // 直接报错：box元素此时并没有渲染出来
        // console.log("box=",box);

        // 页面资源加载完成时回调
        window.onload = function () {
            console.log("window.onload 页面资源加载完成");
            console.log("box=",box);
        }
    </script>
</head>

<body>
    <div id="box">盒子</div>

       
    <script>
        // 响应窗口缩放事件
        window.onresize = function () {
            console.log(window.innerWidth, window.innerHeight);
        }

        // ·当页面滚动时输出信息
        window.onscroll = function () {
            console.log("有人在拨弄滚动条");

            // 水平滚动的距离 垂直方向滚动的距离
            console.log(window.scrollX, window.scrollY);
            console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);
        }

        console.log("页面渲染完毕");
    </script>
</body>

</html>